<template>
    <view class="payment-record-con" id="boxH">
        <!-- 年份选择标签 -->
        <view class="year-chip" @click="pickerShow = true" :style="{ 'top': tH + 'px' }">
            <text>{{ displayYear }}</text>
            <u-icon name="arrow-down" size="16" color="#999"></u-icon>
        </view>

        <!-- 列表区域 -->
        <scroll-view class="scroll-area" :style="{ 'height': sH + 'px' }" scroll-y :refresher-enabled="true"
            :refresher-triggered="refreshing" refresher-background="transparent" @refresherrefresh="onRefresh"
            @scrolltolower="onLoadMore" :lower-threshold="100">
            <view class="list-wrap">
                <view class="record-card" v-for="item in filteredList" :key="item.id">
                    <view class="card-icon">
                        <view class="icon-circle">
                            <i class="iconfont icon-fangzu"></i>
                        </view>
                    </view>
                    <view class="card-header">缴费金额</view>
                    <view class="card-amount">
                        <view class="flex" v-if="item.amount && item.amount.toString().includes('.')">
                            <view class="font44">￥</view>
                            <view class="font52">{{ item.amount.toString().split('.')[0] }}</view>
                            <view class="font44">.{{ item.amount.toString().split('.')[1] }}</view>
                        </view>
                        <view class="flex" v-else>
                            <view class="font44">￥</view>
                            <view class="font52">{{ item.amount || '0' }}</view>
                            <view class="font44">.00</view>
                        </view>
                    </view>
                    <view class="card-row">
                        <text class="row-label">生活缴费</text>
                        <text class="row-value">￥{{ item.amount }}</text>
                    </view>
                    <view class="card-row">
                        <text class="row-label">付款时间</text>
                        <text class="row-value">{{ item.payTime }}</text>
                    </view>
                    <view class="card-row">
                        <text class="row-label">付款方式</text>
                        <text class="row-value">{{ item.method }}</text>
                    </view>
                </view>

                <view class="load-more" v-if="loading">
                    <u-loading-icon mode="circle" size="24"></u-loading-icon>
                    <text class="load-text">加载中...</text>
                </view>
                <view class="empty" v-if="!loading && filteredList.length === 0">
                    <text class="empty-text">暂无记录</text>
                </view>
            </view>
        </scroll-view>

        <!-- 年份选择器 -->
        <u-picker :show="pickerShow" :columns="[yearOptions]" :defaultIndex="[defaultYearIndex]"
            @cancel="pickerShow = false" @close="pickerShow = false" @confirm="onYearConfirm" />
    </view>

</template>
<script>
export default {
    data() {
        const now = new Date()
        const currentYear = now.getFullYear()
        const years = []
        for (let y = currentYear + 1; y >= currentYear - 10; y--) years.push(`${y}年`)
        return {
            pickerShow: false,
            yearOptions: years,
            selectedYear: `${currentYear}年`,
            refreshing: false,
            loading: false,
            page: 1,
            pageSize: 10,
            list: [
                { id: 1, year: `${currentYear}年`, amount: 500, payTime: '2025-06-10 10:20:00', method: '微信支付' },
                { id: 2, year: `${currentYear}年`, amount: 500, payTime: '2025-06-10 10:21:00', method: '微信支付' },
                { id: 3, year: `${currentYear}年`, amount: 500, payTime: '2025-06-10 10:22:00', method: '微信支付' },
                { id: 4, year: `${currentYear}年`, amount: 500, payTime: '2025-06-10 10:23:00', method: '微信支付' },
                { id: 5, year: `${currentYear}年`, amount: 500, payTime: '2025-06-10 10:24:00', method: '微信支付' },
                { id: 6, year: `${currentYear}年`, amount: 500, payTime: '2025-06-10 10:25:00', method: '微信支付' },
                { id: 7, year: `${currentYear - 1}年`, amount: 500, payTime: '2024-06-10 10:20:00', method: '微信支付' },
            ],
            sH: 0,
            tH: 0
        }
    },
    computed: {
        displayYear() { return this.selectedYear },
        defaultYearIndex() { return Math.max(0, this.yearOptions.indexOf(this.selectedYear)) },
        filteredList() {
            return this.list.filter(i => i.year === this.selectedYear)
        }
    },
    mounted() {
        // 获取系统信息计算高度，兼容App端
        const systemInfo = uni.getSystemInfoSync()

        // App端使用screenHeight，H5端使用windowHeight
        const screenHeight = systemInfo.screenHeight || systemInfo.windowHeight
        const statusBarHeight = systemInfo.statusBarHeight || 0
        const windowTop = systemInfo.windowTop || 0

        // 延迟执行确保DOM渲染完成，App端需要更长时间
        setTimeout(() => {
            // App端计算：屏幕高度 - 状态栏
            const calc = screenHeight - windowTop
            this.tH = windowTop + 20
            this.sH = calc > 0 ? calc : screenHeight - statusBarHeight - windowTop
        }, 200) // App端需要更长的延迟

    },
    methods: {
        formatMoney(num) { return Number(num || 0).toFixed(2) },
        onYearConfirm({ value, indexs }) {
            this.selectedYear = (value && value[0]) || this.selectedYear
            this.pickerShow = false
            this.refreshList()
        },
        refreshList() {
            this.page = 1
            // 模拟刷新
            this.refreshing = true
            setTimeout(() => {
                this.refreshing = false
            }, 800)
        },
        onRefresh() { this.refreshList() },
        onLoadMore() {
            if (this.loading) return
            this.loading = true
            // 模拟加载更多
            setTimeout(() => {
                const baseId = this.list.length + 1
                const more = Array.from({ length: 5 }).map((_, i) => ({
                    id: baseId + i,
                    year: this.selectedYear,
                    amount: 500,
                    payTime: `2025-06-10 10:${20 + i}:00`,
                    method: '微信支付'
                }))
                this.list = this.list.concat(more)
                this.loading = false
            }, 800)
        }
    }
}
</script>
<style lang="scss" scoped>
.payment-record-con {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #eaf4ff 0%, #f6f9ff 100%);
    position: relative;
    box-sizing: border-box;
}

.year-chip {
    position: fixed;
    left: 24rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 8rpx 20rpx;
    display: inline-flex;
    align-items: center;
    gap: 8rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
    font-size: 24rpx;
    color: #333;
    z-index: 2;
}

.scroll-area {
    padding-top: 100rpx;
    box-sizing: border-box;
}

.list-wrap {
    padding: 0 32rpx 40rpx;
}

.record-card {
    position: relative;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
    padding: 64rpx 28rpx 28rpx;
    margin: 56rpx 16rpx 24rpx;
}

.card-icon {
    position: absolute;
    left: 50%;
    top: -44rpx;
    transform: translateX(-50%);
}

.icon-circle {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    background: #2E8AE6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6rpx 16rpx rgba(46, 138, 230, 0.3);
    
    .icon-fangzu {
        font-size: 40rpx;
        color: #fff;
    }
}

.card-header {
    text-align: center;
    color: #666;
    font-size: 24rpx;
}

.card-amount {
    text-align: center;
    color: #FF4D4F;
    margin: 10rpx 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;

    .flex {
        display: flex;
        align-items: baseline;
        justify-content: center;
    }

    .font44 {
        font-size: 44rpx;
    }

    .font52{
        font-size: 52rpx;
    }
}

.card-amount .currency {
    font-size: 36rpx;
}

.card-amount .amount {
    font-size: 54rpx;
    font-weight: 700;
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 8rpx;
}

.row-label {
    color: #666;
    font-size: 26rpx;
}

.row-value {
    color: #333;
    font-size: 26rpx;
}

.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
}

.load-text {
    margin-left: 8rpx;
    color: #999;
    font-size: 24rpx;
}

.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48rpx 0;
}

.empty-text {
    color: #999;
    font-size: 26rpx;
}
</style>